<wicket:extend id="content">
	<div class="row">
		<div class="span11">
			<div class="">
				<a wicket:id="newpage" href="#" class="offset2">goto new page</a>
			</div>
			<div class="">
				<button id="addProcess" class="btn primary" wicket:id="addProcess">Add</button>
				<button id="starter" class="btn primary" data-loading-text="running..." onclick="$(this).button('loading')">Start</button>
				<button id="stoper" class="btn danger" onclick="$('#starter').button('reset')">Stop</button>
			</div>
			<div class="">
				<div>
					<ul data-tabs="tabs" class="tabs" id="process-nav">
					</ul>
				</div>
				<div class="tab-content" id="process-details">
					<wicket:container wicket:id="container">
						<div wicket:id="processDetails">
							<div wicket:id="process"></div>
						</div>
					</wicket:container>
				</div>
			</div>
		</div>
		<div class="span5">
			<div wicket:id="controlPanel">[control form]</div>
		</div>
	</div>
	<script>
	var processNo=1;
	$('#stoper').click(function() {
		var no = (processNo < 10 ? '0' : '') + processNo
		var div=$('<div id="process-'+no+'" class="tab-pane"><table class="bordered-table zebra-striped">'+
		'<thead><th>#</th><th>name</th><th>send sum</th><th>receive sum</th></thead><tbody><tr><td></td><td></td><td></td><td></td></tr></tbody></table></div>');
		$('#process-details').append(div);
		
		var li=$('<li><a href="#process-'+no+'">process-'+no+'</a></li>');
		$("#process-nav").append(li);
		$('.tabs').tabs()
		li.find('a').click();
		processNo++
	})
</script>
</wicket:extend>